<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>永恒祝福 · 薯饼</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #1a0a2e;
            min-height: 100vh;
            font-family: 'Microsoft Yahei', cursive;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 3;
            text-align: center;
            padding: 2rem;
            background: rgba(0,0,0,0.7);
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }

        .title {
            font-size: 3.5em;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(255,107,107,0.5);
            margin-bottom: 1rem;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* 祝福语样式 */
        .blessing {
            color: #fff;
            font-size: 1.8em;
            margin: 1rem 0;
            padding: 1rem;
            position: relative;
        }

        /* 新增爱心特效 */
        .heart {
            position: absolute;
            pointer-events: none;
            animation: heartFlow 8s linear infinite;
            filter: drop-shadow(0 0 5px #ff1493);
        }

        /* 爱心形状实现[3,7](@ref) */
        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 20px;
            background: #ff6b6b;
            border-radius: 10px 10px 0 0;
        }

        .heart::before {
            transform: rotate(-45deg) translateX(3px);
        }

        .heart::after {
            transform: rotate(45deg) translateX(-3px);
        }

        /* 爱心动画[1,4](@ref) */
        @keyframes heartFlow {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-100vh) scale(0.3);
            }
        }

        /* 烟花画布 */
        #fireworks {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>

    <div class="container">
        <h1 class="title">🎉 永恒祝福 · 薯饼 🎂</h1>
        <div class="blessing">千万要开心 🌸</div>
        <div class="blessing">千万要健康 🍃</div>
        <div class="blessing">千万要幸福 🎈</div>
        <div class="blessing" style="margin-top:2rem;">🚀 愿生命永恒绽放 🌟</div>
    </div>

    <script>
        // 烟花特效实现[8](@ref)
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor() {
                this.particles = [];
                this.create();
            }

            create() {
                const x = canvas.width/2 + Math.random()*200 -100;
                const y = canvas.height;
                for(let i=0; i<50; i++){
                    this.particles.push({
                        x, y,
                        color: `hsl(${Math.random()*360}, 100%, 50%)`,
                        vx: (Math.random()-0.5)*8,
                        vy: Math.random()*-15,
                        alpha: 1
                    });
                }
            }

            animate() {
                ctx.fillStyle = 'rgba(26, 10, 46, 0.1)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                this.particles.forEach((p, i) => {
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.15;
                    p.alpha -= 0.01;

                    ctx.beginPath();
                    ctx.arc(p.x, p.y, 2, 0, Math.PI*2);
                    ctx.fillStyle = p.color;
                    ctx.globalAlpha = p.alpha;
                    ctx.fill();

                    if(p.alpha <= 0) this.particles.splice(i,1);
                });
            }
        }

        // 爱心生成器[1,4](@ref)
        setInterval(() => {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.style.left = Math.random()*100 + '%';
            heart.style.animationDuration = 5 + Math.random()*3 + 's';
            document.body.appendChild(heart);
            setTimeout(() => heart.remove(), 8000);
        }, 100);

        // 自动烟花播放
        setInterval(() => new Firework().animate(), 200);

        // 窗口适配
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>